<script setup>
import { reactive, nextTick, ref } from 'vue'
import chat from '@/components/chat.vue'
import { useTokenStore } from '@/stores/token';
// import MarkdownIt from "markdown-it"
// const md = new MarkdownIt();
const form = reactive({
  input: '',//输入
  msgList: [] //消息列表
});

const output = ref({
  "task_id": "",
  "workflow_run_id": "",
  "data": {
    "id": "",
    "workflow_id": "",
    "status": "",
    "outputs": {
      "content": ""
    },
    "error": null,
    "elapsed_time": 0,
    "total_tokens": 0,
    "total_steps": 0,
    "created_at": 0,
    "finished_at": 0
  }
}
);

async function sendMsg () {
  var keyword = form.input;
  if (form.input.length > 0) {
    var msg = {
      question: keyword,
      answer: "AI生成中..."
    };
    form.msgList.push(msg);

    form.input = "";
    setScrollToBottom();
    const response = await fetch('http://124.223.19.28/v1/workflows/run', {
      method: "post",
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
        'Authorization': 'Bearer app-fYQ2B61Cvix5QnBAhGx5qHbF'
      },
      body: JSON.stringify({
        inputs: {
          "title": keyword,
        },
        "response_mode": "blocking",
        "user": "lvq0622"
      }),
    });
    if (!response.ok) {
      console.error("错误");
    }
    // console.log(response.body);
    const reader = response.body.getReader();
    let decoder = new TextDecoder('utf-8');
    let resultData = '';

    var str = "";

    msg = {
      question: keyword,
      answer: str
    };
    form.msgList.pop();
    form.msgList.push(msg);
    var count = 1;
    while (true) {
      console.log(count);
      const { done, value } = await reader.read();
      //console.log(value);
      if (done) break;
      resultData = decoder.decode(value, { stream: true });
      str += resultData;
      var person = JSON.parse(str);
      console.log(person);
      msg = {
        question: keyword,
        answer: person.data.outputs.content
      };
      form.msgList.pop();
      form.msgList.push(msg);
      setScrollToBottom();
      count++;
    }
  }

}

/*内容显示过多时自动滑动*/
async function setScrollToBottom () {
  await nextTick()
  let chat = document.querySelector("#chat")
  chat.scrollTop = chat.scrollHeight
}

</script>
<template>
  <div class="common-layout">
    <el-container style="height:100%;width:100%;margin: 0 auto;">
      <el-header style="height: 50px; width: 100% ;backgroundColor:rgba(0,102,255,.06)">
        <p class="centered-text">AI-文章生成机器人</p>
      </el-header>
      <el-main id="chat">
        <chat v-for="item in form.msgList" :msg=item></chat>
      </el-main>
      <el-row style="margin: 0 auto;padding-left: 20px;padding-right: 20px;">
        <div style="width: 100%;">
          <el-input style="float: left;width: 90%;" @keyup.enter="sendMsg" v-model="form.input"></el-input>
          <el-button @click="sendMsg" style="float: right; height: 42px;line-height: 42px;">发送</el-button>
        </div>
        <div style="margin: 0 auto;">
          <p style="color: red;font-size: 11px;">
            服务生成的所有内容均由人工智能模型生成，其生成内容的准确性和完整性无法保证，不代表我们的态度或观点
          </p>
        </div>
      </el-row>
    </el-container>
  </div>
</template>
<style>
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  min-width: 380px;
}

.common-layout {
  height: 100%;
}

#chat {
  height: calc(100vh - 150px);
}

.el-input {
  height: 45px;
  border-radius: 12px;
  box-sizing: border-box;
}
</style>
